Day 2 做完之後，Visual Learning Lab 已經有一個看起來還算完整的首頁了。可以上傳 PDF、貼文字，也有 Concept Map、Flow、Analogies、Image Breakdown、3D / Motion、Source Check 這幾個功能區塊。
但說穿了，那時候它還只是一個漂亮的空殼。
按下 Visualize 之後，只會很老實地告訴我：
Visualization generation will be added in a future version.
所以 Day 3 的目標很簡單：先不要急著畫圖，先讓它真的看得懂我丟進去的內容。
Day 2 的 Visual Learning Lab 已經有介面，但還沒有真正的 AI 能力。
以前我都是直接打開 ChatGPT，把教材貼進去，然後開始問問題。這次第一次遇到一個很基本，但我以前其實沒真的想過的問題：
如果不是我在 ChatGPT 裡跟 GPT 說話，而是我的程式想跟 GPT 說話，要怎麼辦？
答案是 API。
我現在對 API 最直覺的理解就是：它是一條讓我的程式可以把資料送給 OpenAI，再把 GPT 的結果拿回來的管道。
原本的流程只有：
我
↓
Visual Learning Lab
今天之後開始變成：
我貼入內容
↓
Visual Learning Lab
↓
OpenAI API
↓
GPT 分析
↓
結果送回 Visual Learning Lab
↓
網站顯示給我
這也是我第一次比較有感覺地理解，「在 ChatGPT 裡使用 GPT」和「把 GPT 放進自己的產品裡」其實是兩件不同的事情。
要讓自己的程式使用 OpenAI API，需要先建立一組 API Key。
可以把它想成程式拿來證明「我有權限使用這個 API」的一把鑰匙。
這東西也讓我第一次碰到專案裡的「秘密」。
API Key 不能直接寫在公開的程式碼裡，因為如果被別人拿到，就可能使用我的 API 額度。所以這次多建立了兩個之前完全沒碰過的東西：
.streamlit/secrets.toml
.gitignore
secrets.toml 負責把 API Key 存在我自己的電腦裡，而 .gitignore 則告訴 Git：
這個檔案不要傳到 GitHub。
目前我的 .gitignore 裡就有：
.streamlit/secrets.toml
看起來只是一行，但它避免了我哪天順手把整個專案 push 上去時，連自己的 API Key 一起公開。
而且光是建立這些檔案，我就跟 Windows 奮鬥了一陣子。
.gitignore 一開始一直被存成 .gitignore.txt，.streamlit 還曾經少打一個字母。這些事情跟 AI 好像完全沒關係，但實際開始做東西之後才發現，很多時間就是花在這種「為什麼它就是不照我想的跑」的小地方。
把 API Key 和基本環境處理好之後，我把今天的需求交給 Codex。
這次我沒有叫它重做網站，而是在 Day 2 的版本上新增 AI 分析功能。需求大概是：
保留現在的 UI
使用 OpenAI API
使用者貼文字後才能分析
按下 Visualize 時呼叫 GPT
等待時顯示 Loading
API 出錯不能讓整個網站直接壞掉
GPT 要回傳四種結果：
PDF 今天還是先不碰。
因為我現在最想確認的是：Visual Learning Lab 到底能不能把一段文字送給 GPT，再把分析結果拿回來。
Codex 改完之後，requirements.txt 也多了 OpenAI 的 Python SDK。重新安裝套件、啟動 Streamlit，Day 3 第一版就跑起來了。
當然，沒有一次成功。
我第一次按 Visualize 時，畫面直接跳出：
OpenAI API key is not configured yet.
最後才發現 Streamlit 沒有正確讀到我放的 secrets。
第一次呼叫 GPT 當然沒有一次成功，至少錯誤訊息有正常出現。
修好資料夾名稱、確認 secrets.toml 的位置，再把 Streamlit 重開之後，我重新按了一次。
這次真的有東西跑出來了。
我拿來測試的是一小段三相感應馬達介紹：
A three-phase induction motor uses three alternating currents that are separated by 120 electrical degrees. These currents create a rotating magnetic field in the stator. The rotating magnetic field induces current in the rotor, producing torque and causing the rotor to rotate.
我故意沒有一開始就丟幾十頁 PDF，而是只給它短短一段文字。
因為今天不是在測它能不能處理大型教材，而是在測整條 AI 管線到底通不通。
按下 Visualize 之後，畫面第一次真的出現了：
先用一小段話說這份內容到底在講什麼。
再把內容裡的重要概念拆出來，例如：
Learning Lab 第一次真的透過 GPT 分析輸入內容。
這時候我才第一次覺得，它跟 Day 2 已經不是同一個東西了。
昨天所有功能都還只是畫面上的名稱，今天至少已經有一個真的會工作的 AI 核心。
這次我還特別要求 GPT 不只找出「有哪些概念」，還要整理這些概念之間的關係，也就是 Relationships。
例如這段馬達內容裡，大概有這樣的因果關係：
Three-phase currents
↓
Rotating magnetic field
↓
Induced rotor current
↓
Torque
↓
Rotor rotation
這件事情現在看起來只是一串文字，但它其實很重要。
因為 Concept Map 或 Flow 本質上需要的就是：
有哪些節點？
哪些節點彼此有關？
它們之間是什麼關係？
Day 3 的 GPT 現在已經可以先幫我把這些東西整理出來。
接下來就不一定要讓 GPT 自己「畫圖」，而是可以把這些結構交給網站，再由網站真正畫成可以操作的 Concept Map 或流程圖。
這次的最後一個輸出是 Suggested Visualization。
我的想法是，不希望未來每次都要使用者自己先知道：
「這一段我要畫流程圖。」
因為如果使用者自己都已經知道最適合怎麼呈現，好像就少了一點 AI 的價值。
所以我希望 GPT 可以先讀內容，再判斷這份內容比較適合：
哪一種方式。
這次三相感應馬達的結果，它建議了：
Flow
Image / Diagram
3D / Motion
這其實滿符合直覺，因為它本來就是一個有明確因果流程、又有空間結構和運動過程的概念。
圖說：GPT 不只整理概念，也開始判斷這份內容比較適合用 Flow、Diagram，還是 3D / Motion 來呈現。
而且這次我還注意到一個我覺得很不錯的細節。
它在 Relationships 下面主動補了一句，大意是：
原始內容沒有提供更進一步的轉矩產生機制，或轉子速度和磁場速度差異的細節。
這點其實跟 Day 2 新增的 Source Check 很呼應。
我原本有點擔心 AI 會為了把內容講完整，偷偷補上原文沒說的東西。但這次它反而有主動標出「來源沒有提供更多細節」。
這當然還不等於真正的 Source Check，但至少方向上是我想要的：
原文沒說，就不要假裝原文有說。
雖然這個專案叫 Visual Learning Lab，但做到 Day 3，目前畫面上其實還沒有真正的 Concept Map，也沒有流程圖，更不用說 3D。
現在做的還是：
原始內容
↓
GPT 理解
↓
整理成結構化資訊
但我覺得這一步不能直接跳過。
如果未來我要讓 AI 自動產生流程圖、概念圖、圖片拆解甚至 3D 模型，那至少要先回答：
到底有哪些東西應該被畫出來？
它們之間是什麼關係？
這份內容最適合什麼表達方式？
今天做的，就是先讓 AI 回答這些問題。
Day 1 是想法，Day 2 是介面，Day 3 則是第一次把真正的 GPT 接進來。
Visual Learning Lab 現在終於不只是看起來像 AI 工具。
它第一次真的開始「看懂」東西了。
下一步，就該把它看到的東西畫出來了。
GitHub Repo：
https://github.com/f24131128-lgtm/visual-learning-lab
iThome鐵人賽
看影片追技術